<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Moon, Sunny, User, Setting, SwitchButton } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import Background from './components/common/Background.vue'
import Sidebar from './components/common/Sidebar.vue'

const router = useRouter()
const route = useRoute()
const isDark = ref(false)
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
const userAvatar = ref(null)

const isAuthenticated = computed(() => {
  return localStorage.getItem('access_token') !== null
})

const currentPageTitle = computed(() => {
  const routeTitles = {
    '/dashboard': '仪表盘',
    '/dashboard/documents': '文档列表',
    '/dashboard/upload': '上传文档',
    '/dashboard/shared': '共享文档',
    '/dashboard/profile': '个人信息',
    '/dashboard/settings': '系统设置',
    '/dashboard/about': '关于系统'
  }
  return routeTitles[route.path] || '文档管理系统'
})

const toggleDark = (value) => {
  if (value) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
}

const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/dashboard/profile')
      break
    case 'settings':
      router.push('/dashboard/settings')
      break
    case 'logout':
      localStorage.removeItem('access_token')
      localStorage.removeItem('refresh_token')
      localStorage.removeItem('username')
      ElMessage.success('已退出登录')
      router.push('/login')
      break
  }
}
</script>

<template>
  <Background>
    <div class="app-container">
      <template v-if="isAuthenticated">
        <Sidebar />
        <div class="main-container">
          <el-header class="app-header">
            <div class="header-left">
              <h2>{{ currentPageTitle }}</h2>
            </div>
            <div class="header-right">
              <el-dropdown @command="handleCommand">
                <el-avatar 
                  :size="32"
                  :src="userAvatar || defaultAvatar"
                />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="profile">
                      <el-icon><User /></el-icon>
                      个人信息
                    </el-dropdown-item>
                    <el-dropdown-item command="settings">
                      <el-icon><Setting /></el-icon>
                      系统设置
                    </el-dropdown-item>
                    <el-dropdown-item divided command="logout">
                      <el-icon><SwitchButton /></el-icon>
                      退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>

              <el-switch
                v-model="isDark"
                class="ml-2"
                style="margin-left: 16px"
                inline-prompt
                :active-icon="Moon"
                :inactive-icon="Sunny"
                @change="toggleDark"
              />
            </div>
          </el-header>
          
          <el-main class="app-main">
            <router-view v-slot="{ Component }">
              <transition name="fade" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
          </el-main>
        </div>
      </template>
      
      <router-view v-else />
    </div>
  </Background>
</template>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
}

#app {
  min-height: 100vh;
}

/* Element Plus 暗色主题覆盖 */
:root {
  --el-color-primary: #6B46C1;
  --el-color-primary-light-3: #805AD5;
  --el-color-primary-light-5: #9F7AEA;
  --el-color-primary-light-7: #B794F4;
  --el-color-primary-light-9: #D6BCFA;
  --el-color-primary-dark-2: #553C9A;
}

/* 布局样式 */
.app-container {
  min-height: 100vh;
  display: flex;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: rgba(255, 255, 255, 0.02);
}

.app-header {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
}

.header-left h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(107, 70, 193, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 70, 193, 0.5);
}

/* 深色模式适配 */
.dark {
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #e0e0e0;
  --el-border-color-lighter: #404040;
}

.dark .el-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.dark .el-table {
  background: transparent;
}

.dark .el-table th,
.dark .el-table tr {
  background: rgba(255, 255, 255, 0.05);
}

.dark .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(255, 255, 255, 0.02);
}

.dark .el-pagination {
  background: transparent;
}

/* 卡片样式优化 */
.el-card {
  transition: all 0.3s ease;
}

.el-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
</style>
